<template>
	<view>
		<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;height: 412rpx;background-color: #fff;">
			<image src="http://cdn.hntgov.net/online/static/ps_tx.png" style="width: 216rpx;height: 184rpx;"></image>
			<text style="font-size: 28rpx;padding-top: 16rpx;">感谢您的用心评价~您的言语将帮助更多人~</text>
		</view>
		<view style="margin-top: 20rpx;background-color: #fff;padding-top: 40rpx;">
		<u-divider >继续逛逛</u-divider>
		<view class="new_five">
			<view v-for="(item,index) in testList" :key='index' class="new_five_view" @tap='toGoods(item.id)'>
				<view class="new_five_img_container">
					<image src="https://aliyunoss.hntgov.net/image/2023/04/03/434bc1d204e14ed29ad56f88a89c2d22.jpg" mode="aspectFill"></image>
					<!-- <text>最热</text> -->
				</view>
				<text class="new_five_title">湘潭全域旅游惠民卡（中国出了个毛泽东演湘潭全域旅游惠民卡（中国出了个毛泽东演</text>
				<text style="font-size: 24rpx;color: #989898;margin-left: 14rpx;">已售169件</text>
				<view
					style="width: 335rpx;position: relative;margin-top: 12rpx;display: flex;align-items: center;margin-left: 14rpx;">
					<text style="font-size: 30rpx;color: #ED2D38;">￥99</text>
					<view class="li_buy">立即购买</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>
<script>
	var that=''
	export default{
		data(){
			return{
				testList:4,
				
				
			}
		},
		onLoad() {
			that=this
			that.getRecommendProduct()
		},
		methods:{
			toGoods(e){
				uni.reLaunch({
					url:'../product/goods?productId='+e+'&code='+uni.getStorageSync('code')
				})
			},
			getRecommendProduct(){
				that.$request('/api/product/getRecommendProduct?num=4', {}, 'POST').then(
					res => {
						that.testList=res.Data.productList
					})
			},
		}
	}
</script>


<style lang="scss">
	.li_buy{
		width: 136rpx;
		height: 56rpx;
		color: #fff;
		background: linear-gradient(90deg, #FF4C42 0%, #FF9469 100%);
		border-radius: 56rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		position: absolute;
		right: 20rpx;
	}
	page{
		background-color: #f7f7f7;
	}
	.new_five_img_container{
		width: 335rpx;
		height: 335rpx;
		position: relative;
	}
	.new_five_img_container image{
		width: 335rpx;
		height: 335rpx;
		border-radius: 12rpx;
	}
	.new_five{
		width: 718rpx;
		background: linear-gradient(180deg, #E3F0FC 0%, #98CDFF 100%);
		padding-bottom: 30rpx;
		border-radius: 30rpx;
		margin-left: 16rpx;
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		.new_five_view{
			width: 333rpx;
			// height: 335rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding-bottom: 30rpx;
			margin: 24rpx 12rpx 0rpx 13rpx;
		}
	}
	.new_five_img_container text{
		padding: 5rpx 10rpx 5rpx 10rpx;
		color: #FFFFFF;
		background-color: #ED2D38;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		border-radius: 12rpx 0rpx 12rpx 0rpx;
		font-size: 20rpx;
	}
	.new_five_title{
		width: 288rpx;
		margin-left: 14rpx;
		color: #181617;
		font-size: 26rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
		margin-top: 16rpx;
		margin-bottom: 10rpx;
	}
</style>
